document.addEventListener('DOMContentLoaded',function(){
    crumbsNav()
    leftTab()
    intruduceTab()
    sideClick()
    tabIconEvent()
    dateImg()
    zoom()
    baseNews()
 goodsSizeNews()
})
//1、面包屑导航条思路
function crumbsNav(){
    // 1、通过数据库找数据
    let date = goodData.path
    // 2、创建a 节点和href 属性
    date.forEach(function(item,index){
        let aEle = document.createElement('a')
        aEle.innerText = item.title
      // 3、最后一个a标签没有href属性
      if(index !== date.length -1){
        aEle.href = item.url
      }
      // 4、最后上树
      let conpin = document.querySelector('.wrap .con .conPoin')
      conpin.appendChild(aEle)
    }) 
}
//2、左边的选项卡切换
//排他思想
 function leftTab(){
    let productDetail = document.querySelectorAll('.wrap .productDetail .aside .tabWrap h4')
    let productContent = document.querySelectorAll('.wrap .productDetail .aside .tabContent> div')
    productDetail.forEach(function(h4,index){
      h4.onclick = function(){
        productDetail.forEach(function(item){
            item.className =''
        })
        this.classname = 'active'
        productContent.forEach(function(div){
            div.className = ''
        })
        productContent[index].className ='active'
      }
    })
 }
 //3、底部选项卡
 function intruduceTab(){
    let liEle = document.querySelectorAll('.wrap .productDetail .detail .intro .tabWrap li')
    let goodsIntro = document.querySelectorAll('.wrap .productDetail .detail .intro .tabContent > div')
    liEle.forEach(function(li,index){
      li.onclick = function(){
        liEle.forEach(function(item){
          item.className =''
        })
        this.className ='active'
        goodsIntro.forEach(function(div){
            div.className =''
        })
        goodsIntro[index].className ='active'
      }
    })
 }
 //4、侧边栏开关事件
 function sideClick(){
  let toolBar = document.querySelector('.wrap .toolBar.toolWrap')
  let  but = document.querySelector('.wrap .toolBar .but.list')
  //先假设默认关
   let isClosed =true
  //点击时在判断关和开的情况变化
  but.onclick = function(){
    if(isClosed){
      toolBar.classList.replace('toolWrap','toolOut')
      but.classList.replace('list','cross')
    } else{
      toolBar.classList.replace('toolOut','toolWrap')
      but.classList.replace('cross','list')
    }
    //进行取反操作
    isClosed = !isClosed
  }

 }
 //5、侧边栏右侧导航条
 //选中右侧所有小图标
//鼠标悬浮和离开时，li里面的i和em样式改变
 function tabIconEvent(){
    let lis = document.querySelectorAll('.wrap .toolBar .toolList li')
    lis.forEach(function(li){
     let iNode= li.querySelector('i')
     let emNode =  li.querySelector('em')
      li.onmouseenter = function(){
        iNode.style.backgroundColor ='rgb(200,17,34)'
        emNode.style.left = '-62px'
      }
      li.onmouseleave = function(){
        iNode.style.backgroundColor ='rgb(122,110,110)'
        emNode.style.left = '35px'
      }
    })
 }
//5放大镜第一图
//从数据库拿图片，把第一张图片放入小图片盒子中
let i = 0  //全局保存li 的index
function dateImg(){
    let SmallSrc = goodData.imgsrc
    //放大镜第一屏
    let smallBox = document.querySelector('.wrap .con .mainCon .previewWrap .preview .zoom')
    let ulEle = document.querySelector('.wrap .con .mainCon .previewWrap .specScroll .itemCon .list')
    let smallImg = new Image()
    smallImg.src = SmallSrc[0].s
    smallBox.appendChild(smallImg)
    //缩略图 创建img和li 在放入ul容器中
    SmallSrc.forEach(function(img){
      let li = document.createElement('li')
      let imgNode= new Image()
      imgNode.src = img.s
      li.appendChild(imgNode)
      ulEle.appendChild(li)
    })
    //当缩略图被点击的时候，缩略图的下标绑定小图盒子
    let liNode = document.querySelectorAll('.wrap .con .mainCon .previewWrap .specScroll .itemCon .list li')
    liNode.forEach(function(item,index){
      item.onclick = function(){
        smallImg.src = goodData.imgsrc[index].s
        i = index  //保存
      }
    
    })
    //找左右箭头绑定事件
    let arrowRight = document.querySelector('.wrap .con .mainCon .previewWrap .specScroll .next')
    let arrowLeft = document.querySelector('.wrap .con .mainCon .previewWrap .specScroll .prev')
    let ulLeft = 0
    let showNum = 5
   //每一步移动的距离等于liwidth+ marginRgiht
   let moveStep =liNode[0].offsetWidth + parseInt(window.getComputedStyle(liNode[0]).marginRight)
    // 最大移动距离 = （li的长度 - 5）*每一步
   let maxMove = (liNode.length - showNum)*moveStep 
    arrowRight.onclick = function(){
      if(ulLeft === maxMove){
        return
      }
      ulLeft += moveStep
      ulEle.style.left = -ulLeft +'px'
    }
    arrowLeft.onclick = function(){
      if(ulLeft === 0){
        return
      }
      ulLeft -= moveStep
      ulEle.style.left = -ulLeft +'px'
    }
 }

 //6、放大镜
 function zoom(){
//当鼠标悬浮时，创建大图、大图片、遮盖
let smallBox = document.querySelector('.wrap .con .mainCon .previewWrap .preview .zoom')
let previewWrap = document.querySelector('.wrap .con .mainCon .previewWrap .preview')
let mask =null  //多次使用，提取到全局，默认为null
let bigBox  =null
let bigImg =null
smallBox.onmouseenter = function(){
  mask = document.createElement('mask')
  mask.className = 'mask'
    bigBox = document.createElement('div')
    bigBox.className = 'bigBox'
   bigImg = document.createElement('img')
    bigImg.src = goodData.imgsrc[i].b
    bigBox.appendChild(bigImg )
    previewWrap.appendChild(bigBox)
    smallBox.appendChild(mask)
}
smallBox.onmouseleave = function(){
  previewWrap.removeChild(bigBox)
  smallBox.removeChild(mask)
  mask =bigBox = bigImg=null  //垃圾回收
}
 //鼠标在小图片盒子移动，遮盖的移动范围仅作用于小盒子
 smallBox.onmousemove = function(event){
  //遮盖移动左侧距离= 鼠标点击clientx - mask.offsetWeight/2 -smallBox.getBoundingclientRect().left
  let maskMoveLeft = event.clientX - mask.offsetWidth/2 - smallBox.getBoundingClientRect().left
  let maskMoveTop = event.clientY - mask.offsetHeight/2 - smallBox.getBoundingClientRect().top
  if(maskMoveLeft < 0){
    maskMoveLeft =0
  }
  if(maskMoveTop < 0){
    maskMoveTop =0
  }
  //遮盖最大移动距离 = 小图片盒子的宽度clientWidth - 遮盖的offsetWidth
 let maskMaxMoveLeft = smallBox.clientWidth - mask.offsetWidth
 let maskMaxMoveTop = smallBox.clientHeight - mask.offsetHeight
 if(maskMoveLeft >maskMaxMoveLeft ){
  maskMoveLeft = maskMaxMoveLeft 
 }
 if(maskMoveTop > maskMaxMoveTop){
  maskMoveTop = maskMaxMoveTop
 }
 mask.style.left = maskMoveLeft +'px'
 mask.style.top = maskMoveTop +'px'
  //大图片等比例移动
  //遮盖的移动距离/遮盖最大的移动距离 = 大图的移动距离 / 大图最大的移动距离
  //大图最大的移动距离 = 大图片的宽度 - 大图片盒子的宽度
  let bigMaxMoveLeft = bigImg.clientWidth -bigBox.clientWidth
  let bigMaxMoveTop = bigImg.clientHeight -bigBox.clientHeight
 //大图移动距离 = 遮盖的移动距离 *大图最大的移动距离 /遮盖最大的移动距离 
 let bigImgMoveLeft = maskMoveLeft*bigMaxMoveLeft /maskMaxMoveLeft
 let  bigImgMoveTop =maskMoveTop*bigMaxMoveTop /maskMaxMoveTop
 bigImg.style.left = -bigImgMoveLeft +'px'
 bigImg.style.top = -bigImgMoveTop +'px'
 }
 }
 //7、字符串模板基本信息
 //引入数据基本信息，添加`模板字符串`
 function baseNews(){
    let goodsDetail =goodData.goodsDetail
    let info =`<h3 class="infoName">
    ${goodsDetail.title}
  </h3>
  <p class="news">
  ${goodsDetail.recommend}
  </p>
  <div class="priceArea">
    <div class="priceArea1">
      <div class="title">
        价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
      </div>
      <div class="price">
        <i>￥</i>
        <em> ${goodsDetail.price}</em>
        <span>降价通知</span>
      </div>
      <div class="remark">
        <i>累计评价</i>
        <span> ${goodsDetail.evaluateNum}</span>
      </div>
    </div>
    <div class="priceArea2">
      <div class="title">
        促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销
      </div>
      <div class="fixWidth">
        <i> ${goodsDetail.promoteSales.type}</i>
        <span>
        ${goodsDetail.promoteSales.content}
        </span>
      </div>
    </div>
  </div>
  <div class="support">
    <div>
      <div class="title">
        支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持
      </div>
      <div class="fixWidth">
      ${goodsDetail.support}
      </div>
    </div>
    <div>
      <div class="title">配&nbsp;送&nbsp;至</div>
      <div class="fixWidth"> ${goodsDetail.address}</div>
    </div>
  </div>`
  let infoBox = document.querySelector('.wrap .con .mainCon .infoWrap .info1')
  infoBox.innerHTML =info
   //附加选项
 let attchGoods = document.querySelector('.wrap .productDetail .detail .fitting .goodSuits .master p')
 let inputEle = document.querySelectorAll('.wrap .productDetail .detail .fitting .goodSuits .suits input')
 let goodsNum= 0;
 let goodsPriceTotal = 0;
 //遍历input选项，被选中的累加数量和价格
 inputEle.forEach(function(input){
  if(input.checked){
    goodsNum++
    goodsPriceTotal += parseInt(input.value )
  } 

 })
  let selected = document.querySelector('.wrap .productDetail .detail .fitting .goodSuits .result > div .selected')
 selected.innerText = goodsNum
  let  priceTotal = document.querySelector('.wrap .productDetail .detail .fitting .goodSuits .result .price')
 attchGoods.innerText ='￥'+goodsDetail.price
 priceTotal.innerText = '￥' +( goodsPriceTotal + goodsDetail.price)
 }


 //渲染商品规格信息
 //创建一个新数组，做一个集合
 newArr = [0,0,0,0]
 function goodsSizeNews(){
  let sizeDate = goodData. goodsDetail.crumbData
   let choose = document.querySelector('.wrap .con .mainCon .infoWrap .choose .chooseArea .choosed')
    sizeDate.forEach(function(item){
       let dl = document.createElement('dl')
    let dt = document.createElement('dt')
    dt.innerText =item. title
    dl.appendChild(dt)
    item.data.forEach(function(ddNode){
      let dd = document.createElement('dd')
      dd.innerText = ddNode.type
      dl.appendChild(dd)
    })
    choose.appendChild(dl)
    })
    //实现dd排他效果
    let dlEle = document.querySelectorAll('.wrap .con .mainCon .infoWrap .choose .chooseArea dl')
    dlEle.forEach(function(dl,dlIndex){
        let ddNode = dl.querySelectorAll('dd')
        ddNode.forEach(function(dd){
          dd.onclick = function(){
            ddNode.forEach(function(item){
              item.style.color ='rgb(102, 102, 102)'
            })
            this.style.color ='red'
            newArr[dlIndex] ={text :this.innerText}
            let choosed = document.querySelector('.wrap .con .mainCon .infoWrap .choose .chooseArea')
            //获取新数组的内容
            newArr.forEach(function(item){
              //因为数组有四个，如果其他值没获取就为0，所以要排除没获取的情况
              if(!item){
                return
              }
              let mask = document.createElement('mask')
              mask.innerText = item.text
              let a = document.createElement('a')
              a.innerText = 'x'
              mask.appendChild(a)
              choosed.appendChild( mask)
        
            })
          }
        })
    })
  

 

 }
 




  
